
html {
  font-size: 22px;
}

body {
  height: 100vh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-family: Arial, Helvetica;
  background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(97,186,255,1) 0%, rgba(166,239,253,1) 90.1% );
}

.card-container {
  width: 300px;
  height: 400px;
  position: relative;
  perspective: 1000px;
}

.cover, .back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  transition: transform .25s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  border-radius: .4rem;
  box-shadow: 0 .2rem .5rem rgba(0, 0, 0, .18);
}

.cover {
  background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(37,145,251,0.98) 0.1%, rgba(0,7,128,1) 99.8% );
  transform: rotateY(0deg);
}

.card-container:hover .cover {
  transform: rotateY(180deg);
}

.back {
  background-image: linear-gradient( 129.1deg,  rgba(243,199,83,1) 26.8%, rgba(18,235,207,1) 114.1% );
  transform: rotateY(180deg);
}

.card-container:hover .back {
  transform: rotateY(0deg);
}